import React from 'react';
import { Card, Table, Space, Button, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { FileOutlined, FolderOutlined } from '@ant-design/icons';

interface DataType {
    key: string;
    name: string;
    type: 'file' | 'folder';
    size: string;
    lastModified: string;
}

const FilesPage = () => {
    const columns: ColumnsType<DataType> = [
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            render: (text, record) => (
                <Space>
                    {record.type === 'folder' ? <FolderOutlined /> : <FileOutlined />}
                    {text}
                </Space>
            ),
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            render: (type) => (
                <Tag color={type === 'folder' ? 'blue' : 'green'}>
                    {type === 'folder' ? '文件夹' : '文件'}
                </Tag>
            ),
        },
        {
            title: '大小',
            dataIndex: 'size',
            key: 'size',
        },
        {
            title: '修改时间',
            dataIndex: 'lastModified',
            key: 'lastModified',
        },
        {
            title: '操作',
            key: 'action',
            render: () => (
                <Space size="middle">
                    <Button type="link">下载</Button>
                    <Button type="link" danger>删除</Button>
                </Space>
            ),
        },
    ];

    const data: DataType[] = [
        {
            key: '1',
            name: '文档',
            type: 'folder',
            size: '-',
            lastModified: '2024-01-10 10:00',
        },
        {
            key: '2',
            name: 'report.pdf',
            type: 'file',
            size: '2.3MB',
            lastModified: '2024-01-09 15:30',
        },
    ];

    return (
        <Card
            title="文件管理"
            extra={
                <Space>
                    <Button type="primary">上传文件</Button>
                    <Button>新建文件夹</Button>
                </Space>
            }
        >
            <Table columns={columns} dataSource={data} />
        </Card>
    );
};

export default FilesPage;
